<template>
  <div class="progress">
    <div class="progress-chart" :ref="'echart_' + name"></div>
    <p class="progress-text">{{ name }}</p>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  props: {
    name: {
      type: String,
      default: () => {
        return ''
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    extend: {
      type: Object,
      default: () => {
        return {
          title: '50%', //标题
          subtext: '100',
        }
      },
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const chartEl = this.$refs['echart_' + this.name]
      const myChart = echarts.init(chartEl)
      const option = {
        title: {
          text: this.extend.title,
          subtext: this.extend.subtext, //副标题文本
          left: '90px',
          top: '90px',
          textStyle: {
            fontSize: 18,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
            },
            data: [
              {
                value: 200,
                selected: false,
              },
              {
                value: 400,
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style scoped lang="scss">
.progress {
  position: relative;
  &-chart {
    width: 220px;
    height: 220px;
  }
  &-text {
    width: 220px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 10px;
  }
}
</style>
